import { ReactNode } from "react";
import { Text, View } from "@tarojs/components";
import { useBoolean } from "ahooks";
import ByIcon from "../ui/ByIcon";
import ByRow from "../ui/ByRow";
import ByCol from "../ui/ByCol";
import Sticky from "./Sticky";

export default ({
  title,
  children,
  className,
  slotRight,
  slotFooter,
  defaultFold,
}: {
  title: string;
  className?: string;
  children?: ReactNode;
  defaultFold?: boolean;
  slotRight?: ReactNode;
  slotFooter?: ReactNode;
}) => {
  const [fold, { toggle }] = useBoolean(defaultFold);

  return (
    <View
      className={`relative bg-white rounded-xl shadow-black-1 ${className}`}
    >
      <Sticky
        position="top"
        className={`p-3 bg-white border-line-light ${
          !fold ? "border-b-1 rounded-t-xl" : "rounded-xl"
        }`}
      >
        <ByRow content="between">
          <ByCol span={"auto"}>{title}</ByCol>

          <View>{slotRight}</View>
          <View className="text-sm text-third" onClick={toggle}>
            <Text className="pr-1"> {fold ? "展开" : "收起"}</Text>
            <ByIcon name={fold ? "ArrowBottom" : "ArrowTop"} />
          </View>
        </ByRow>
      </Sticky>

      {fold ? slotFooter : <View className="p-3 rounded-b-xl">{children}</View>}
    </View>
  );
};
